<template>
  <BasicDrawer
    :showFooter="true"
    destroyOnClose
    v-bind="$attrs"
    title="新增用户"
    @register="registerDrawer"
    @ok="handleOk"
  >
    <BasicForm @register="register" />
    <TestDestroyOnClose />
  </BasicDrawer>
</template>
<script setup lang="ts">
  import { BasicDrawer, useDrawer } from '@/components/Drawer';
  import { BasicForm, useForm } from '@/components/Form';
  import { nextTick, ref } from 'vue';
  import { message } from 'ant-design-vue';
  import TestDestroyOnClose from './TestDestroyOnClose.vue';

  const currentRecord = ref();
  const [registerDrawer, { setDrawerProps, closeDrawer, openDrawer }] = useDrawer();
  const changeLoading = (loading: boolean) => {
    setDrawerProps({
      loading: loading,
    });
  };
  const changeOkLoading = (confirmLoading: boolean) => {
    setDrawerProps({
      confirmLoading: confirmLoading,
    });
  };
  const [register, { setFieldsValue, validate, resetFields }] = useForm({
    labelWidth: 100,
    baseColProps: {
      span: 24,
    },
    schemas: [
      {
        field: 'userName',
        component: 'Input',
        label: '用户名',
        required: true,
        // colProps: {
        //   span: 12,
        // },
        componentProps: {
          placeholder: '请输入用户名',
        },
      },
      {
        field: 'realName',
        component: 'Input',
        label: '姓名',
        // colProps: {
        //   span: 12,
        // },
        required: true,
        componentProps: {
          placeholder: '请输入姓名',
        },
      },
    ],
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });
  const handleOk = () => {
    validate().then((values) => {
      console.log(values);
      changeLoading(true);
      changeOkLoading(true);
      setTimeout(() => {
        resetFields();
        changeLoading(false);
        changeOkLoading(false);
        closeDrawer();
        message.success('新增成功');
      }, 2000);
    });
  };
  defineExpose({
    show(data) {
      currentRecord.value = data;
      openDrawer();
      nextTick(() => {
        setFieldsValue(data);
      });
    },
  });
</script>
<style lang="less" scoped></style>
